<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    <script src="/js/auth.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :lg="24">
        <el-card class="box-card" >
            <el-row>
                <el-col :lg="18" >
                    <div>
                        <el-button type="primary" style="margin-bottom: 10px; border-radius: 0px;" onclick="location='/ex/addquestion.html'">添加试题</el-button>
                        <el-button type="primary" style="margin-bottom: 10px; border-radius: 0px;" @click="batchDel">删除</el-button>
                        <el-button type="primary" style="margin-bottom: 10px; border-radius: 0px; float: right" onclick="location='/ex/banktype.html'">题库分类</el-button>
                        <el-button type="primary" style="margin-bottom: 10px; border-radius: 0px; float: right;" onclick="location='/ex/questions.html'">试题管理</el-button>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :lg="18">
                    <label>题库名称</label>
                    <el-input v-model="qbname" placeholder="请输入内容" clearable style="width: 200px" ></el-input>

                    <label>题库分类</label>
                    <template>
                        <el-select v-model="typeValue" placeholder="请选择" style="width: 200px"   >
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select >
                    </template>

                    <el-button type="primary" style="border-radius: 0px;" @click="search">搜索</el-button>
                </el-col>
            </el-row>
        </el-card>
        </el-col>
    </el-row>
    <el-row>
        <el-card class="box-card" >
            <el-row style="top: 10px">
                <el-col :lg="24">
                    <!-- 上部条件选项框 end-->
                    <template>
                        <el-table
                                ref="multipleTable"
                                :data="tableData"
                                tooltip-effect="dark"
                                style="width: 100%"
                                @selection-change="handleSelectionChange">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    prop="id"
                                    label="题库id"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="label"
                                    label="题库名称"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="pname"
                                    label="题库分类"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    label="试题数量"
                                    width="100">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{scope.row.scNum+scope.row.mcNum+scope.row.tofNum+scope.row.bfNum+scope.row.saNum}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="scNum"
                                    label="单选题"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="mcNum"
                                    label="多选题"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="tofNum"
                                    label="判断题"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="bfNum"
                                    label="填空题"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="saNum"
                                    label="问答题"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="200">
                                <template slot-scope="scope">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                                    <el-button type="text" size="small">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-col>
            </el-row>
        </el-card>
    </el-row>

</div>
<script>
    let p = {headers};
    new Vue({
        el:"#app",
        data:{
            qbname:"",
            options:[],
            typeValue:"",
            tableData:[],
            multipleSelection:[]
        },
        mounted(){
            axios.get("/exam/qb/branches",p).then(res=>{
                this.tableData=res.data;
            })
        },
        methods:{
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleClick(row) {
                console.log(row);
            },
            search(){
                let param = new URLSearchParams();
                param.append("label",this.qbname);
                param.append("id",this.typeValue);
                axios.post("/exam/qb/search",param,p).then(res=>{
                    this.tableData=res.data;
                })
            },
            batchDel(){
                let ids = [];
                this.multipleSelection.forEach(item=>{
                    ids[ids.length]=item.id;
                })
                axios.post("/exam/qb/batchDel",ids,p).then(res=>{
                    if(res.data.code==200){
                        axios.get("/exam/qb/branches",p).then(res=>{
                            this.tableData=res.data;
                        })
                        alert("success");
                    }
                })
            }
        }
    })
</script>
</body>
</html>